import Taro, {Component} from "@tarojs/taro";
import {View, Button, Image, Block, Input, Form, Picker} from "@tarojs/components";

import PickerArea from "../../components/PickerArea";

import './authOne.less'

import icon_86 from "../../assets/img/common/icon_86.png";
import {getRuntime} from "../../utils/common";
import {AtIcon} from "taro-ui";



class AuthOne extends Component {
  constructor() {
    super()
  }

  state = {
    fileList: []
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '核对储蓄卡'})
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  uploadFile() {}

  onChange() {}

  onPicketArea(res) {
    console.log(res)
  }

  submit() {}

  render() {
    return (
      <View className='auth auth-two'>
        <View className='step-wrap'>
          <View className='line'>
            <Image className='step_on' src={require('../../assets/img/step_ed.png')} />
            <Image className='step' src={require('../../assets/img/step_ed.png')} />
            <Image className='step_point' src={require('../../assets/img/step_point_on.png')} />
          </View>
          <View className='tips'>
            <View className='tip color-theme'>上传相关证件</View>
            <View className='tip color-theme'>核对身份信息</View>
            <View className='tip'>核对储蓄卡</View>
          </View>
        </View>

        <View className='form-wrap content-30'>
        <Form onSubmit={this.submit.bind(this)}>
          <View className='form-wrap__group'>
            <View className='form-wrap__title'>储蓄卡号</View>
            <View className='form-wrap__content'>
              <Input className='input' placeholderClass='placeholder-class' placeholder='自动识别' />
            </View>
          </View>
          <View className='form-wrap__group'>
            <View className='form-wrap__title'>开户银行</View>
            <View className='form-wrap__content form-wrap__select'>
              <Picker className='select'  mode='selector' range={this.state.selector} onChange={this.onChange}>
                <View className='select' style={{display:'flex'}}>
                  <View className='select placeholder-class'>请选择开户银行</View>
                  <AtIcon className='drop-icon' value='chevron-right' size='20' color='#d1d1d1' />
                </View>
              </Picker>
            </View>
          </View>
          <View className='form-wrap__group'>
            <View className='form-wrap__title'>省/市/区2</View>
              <PickerArea onPicketArea={this.onPicketArea.bind(this)} />
          </View>
          <View className='form-wrap__group'>
            <View className='form-wrap__title'>开户支行</View>
            <View className='form-wrap__content'>
              <Input className='input' placeholderClass='placeholder-class' placeholder='请选择开户支行' />
            </View>
          </View>
          <View className='form-wrap__group '>
            <View className='form-wrap__title'>手机号码</View>
            <View className='form-wrap__content'>
              <Input className='input' type='number' maxLength={11} placeholderClass='placeholder-class' placeholder='请输入银行预留手机号码' />
            </View>
          </View>

        </Form>
        </View>

        <Button className='circular-submit'>立即提交认证</Button>
      </View>
    )
  }
}

export default AuthOne
